import React, { PureComponent } from 'react';
import PropTypes from "prop-types";
import {
    Form,
    Input,
    Select
} from "antd";

const Item = Form.Item
const { Option } = Select;


// 添加用户的form组件
export default class UserForm extends PureComponent {
    // ref 
    userRef = React.createRef();

    componentDidMount() {
        this.props.setUserForm(this.userRef);
    }


    static propTypes = {
        setUserForm: PropTypes.func.isRequired, // 用来传递form对象的函数
        roles: PropTypes.array.isRequired, // 用来接收数组
        user:PropTypes.object
    }


    render() {
        const { roles, user } = this.props
        const formItemLayout = {
            labelCol: {span: 4},
            wrapperCol: {span: 15},
        }

        return (
            <Form ref={ this.userRef } {...formItemLayout}>
                <Item
                label="用户名称:" 
                name="username"
                initialValue={user.username}   
                >
                    <Input placeholder="请输入用户名称" />
                </Item>
                {
                    user._id ? null: (
                        <Item
                        label="密码:" 
                        name="password"
                        initialValue={user.password}  
                        >
                            <Input placeholder="请输入密码" type="password" />
                        </Item>
                    )
                }
                
                <Item
                label="手机号:" 
                name="phone"
                initialValue={user.phone}
                >
                    <Input placeholder="请输入手机号" />
                </Item>
                <Item
                label="邮箱:" 
                name="email"
                initialValue={user.email} 
                >
                    <Input placeholder="请输入邮箱号"/>
                </Item>
                <Item
                label="角色:" 
                name="role_id"
                initialValue={user.role_id}   
                >
                    <Select style={{width: 120}} placeholder="请选择角色">
                        {
                            roles.map(e => {
                                return (<Option value={e._id} key={e._id}>{e.name}</Option>)
                            })
                        }
                    </Select>
                </Item>
            </Form>
        )
    }
}


